<template>
  <div v-if="listArticle.length===0" style="display: flex; flex-direction: column; align-items: center;">
    <el-empty description="这里什么都没有"/>
    <el-button type="primary" plain style="margin-top: 10px;" @click="logtext">开始创作</el-button>
  </div>

  <div  class="entry-list">
    <li  class="item1">
      <div class="entry" v-for="(item,index) in listArticle" :key="index">
        <div class="meta-container">
          <a href="#" class="user-message">
            <div >
              {{item.authorName}}
            </div>
          </a>
          <div class="tag_list">
            <a href=""  class="tag">
              {{item.categoryName}}
            </a>
          </div>
        </div>
        <div class="content-wrapper">
          <div class="content-main">
            <div class="title-row">
              <a href="#" class="title"  target="_blank">
                {{item.title}}</a>
            </div>
            <div class="abstract">
              <a href="#" class="title"  target="_blank">
                <div >
                  {{item.brief}}
                </div>
              </a>
            </div>
          </div>
          <img :src="item.coverUrl"
               alt="11k+ Star 一款更适合中国用户的开源 BI 工具"
               class="lazy thumb"
               loading="lazy" style/>
        </div>
      </div>
    </li>
  </div>
</template>

<script setup>
import router from "@/router";



import {onMounted, ref} from "vue";
import tokenAxios from "@/http/request/TokenAxios";

const listArticle = ref([]);
const user=ref(getUser());

const getListArticle = ()=>{
  console.log(getUser().id)
  tokenAxios.get(BASE_URL+":49282/article/selectMyAuditArticle/"+getUser().id)
      .then((response)=>{
        if (response.state===20000){
          listArticle.value=response.data;
          console.log(listArticle.value)
        }
      })
}
const logtext= ()=>{
  router.push('/text2')
}
onMounted(()=>{
  getListArticle();
})
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 0;
  margin: 0;
}

.comment_text:hover {

  background-color: rgb(248,248,248);
}

.comment_div {
  padding: 20px;
  width: 1200px;
  margin: -40px;
  background-color: white;
  overflow-x: hidden;
  overflow-y: scroll;
}
.comment_div::-webkit-scrollbar{
  display: none;
}

.detail-p{
  line-height: 12px;
  height: 26px;
  font-size: 14px;
  margin: 0 2px;

  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
/*公共样式*/
div {
  display: block;
}
ul {
  padding: 0;
  margin: 0;
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 10px;
}
li{
  display: list-item;
  text-align: -webkit-match-parent;
}
img{
  border-style: none;
  overflow-clip-margin: content-box;
  overflow: clip;
}
a{
  text-decoration: none;
  cursor: pointer;
  color: #909090;
}
.entry-list {
  width: 100%;
  background-color: #fff;
  position: relative;
}
.item1{
  transition: all .3s ease-in;
  list-style: none;
  display: list-item;
  text-align: -webkit-match-parent;
}
.entry{
  cursor: pointer;
  position: relative;
  background: #fff;
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.meta-container{
  color: #8a919f;
  display: flex;
  align-items: center;
}
/*作者栏样式*/
.meta-container .user-message {
  display: flex;
  align-items: center;
  margin-right: 12px;
  max-width: 162px;
  font-size: 13px;
  line-height: 22px;
  color: #515767;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.user-message{
  text-decoration: none;
  cursor: pointer;
  color: #252933;
  margin: initial;
  background-color: transparent;
}
.meta-container .date{
  position: relative;
  padding: 0 25px;
  line-height: 22px;
  font-size: 13px;
  flex-shrink: 0;
}
.meta-container .date::after, .meta-container .date::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 12px;
  background: #e4e6eb;
  content: " ";
}
.meta-container .date::before {
  left: 0;
}
.meta-container .date::after {
  right: 0;
}
.tag_list {
  padding: 0 4px;
  display: flex;
  align-items: center;
}
.tag_list .tag {
  position: relative;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 22px;
  padding: 0 8px;
  color: #8a919f;
}
.tag_list .tag:not(:last-child):after {
  position: absolute;
  right: -1px;
  display: block;
  content: " ";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #515767;
}

/*咨询主体样式*/
.content-wrapper {
  display: flex;
  padding-bottom: 2px;
  border-bottom: 1px solid #e4e6eb;
  margin-top: 10px;
  width: 100%;
}
.content-wrapper .content-main{
  flex: 1 1 auto;
}
.title-row {
  display: flex;
  margin-bottom: 8px;
}
.title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #252933;
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.abstract {
  margin-bottom: 8px;
}
.abstract a {
  color: #8a919f;
  font-size: 13px;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  margin-left: 24px;
  background-color: #fff;
  border-radius: 4px;
}
.lazy {
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
}
.action-list>.item, .action-list {
  display: flex;
  align-items: center;
}
.action-list>.item {
  position: relative;
  margin-right: 20px;
  font-size: 13px;
  line-height: 20px;
  color: #8a919f;
  flex-shrink: 0;
}
.action-list>.item, .action-list {
  display: flex;
  align-items: center;
}
.action-list>.item.like .liked-wrap {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>